<template>
    <div>
        <div style="height:10px"></div>
        <div class="select">
            <div
                v-for="(item, index) in memberSource"
                :key="index"
            >
                <div>
                    <img :src="require('../../asset/icon/icon_mine_vip'+(index+1)+'.png')">
                    <div>
                        {{item.name}}
                    </div>
                </div>
                <div>
                    <div>
                        <span style="font-size: 0.32rem;">￥{{item.o_price}}</span>
                        ￥{{item.fee}}
                    </div>
                    <div
                        class="rightNo"
                        v-if="item.can_buy"
                    ></div>
                    <yd-radio-group
                        class="right"
                        v-model="radio"
                        v-if="item.can_buy"
                        color="#4f5aff"
                    >
                        <yd-radio :val="index"></yd-radio>
                    </yd-radio-group>
                </div>
            </div>
        </div>
        <div
            class="cont"
            v-html="text"
        >
        </div>
        <div style="height: 50px;"></div>
        <div
            class="button"
            @click="setMember()"
            v-if="this.$route.query.vip_level != this.memberSource.length"
        >
            支付￥{{payPrice()}}
        </div>
    </div>
</template>
<script>
import wxPay from "@/config/wxPay.js";
export default {
    name: "member",
    data() {
        return {
            text: '',
            memberSource: [],
            radio: 0,
        }
    },
    methods: {
        // 方法
        payPrice() {
            let price = 0,
                index = this.radio
            if (this.memberSource.length == 0) return;
            if (this.$route.query.vip_level == this.memberSource.length) {
                return 0
            }
            if (this.$route.query.vip_level == 1) {
                this.radio = 1
                price = this.memberSource[index].fee - this.memberSource[0].fee
                return price.toFixed(2)
            } else {
                price = this.memberSource[index].fee
                return price
            }

        },
        setMember() {
            let params = {
                vip_id: this.memberSource[this.radio].id
            };
            this.$post("/member/buy_vip", params)
                .then(res => {
                    if (res.code === 20000) {
                        wxPay(res.data, this.WXPaySucceed);
                    } else {
                        this.$dialog.toast({
                            content: res.msg,
                            time: 2000
                        });
                    }
                })
                .catch(err => { });
        },
        WXPaySucceed() {
            this.$dialog.toast({
                mes: '支付成功',
                timeout: 2000,
                callback: () => {
                    this.$router.back(-1)
                }
            });
        },
        getMemberData() {
            let params = {
                token: localStorage.getItem('token')
            };
            this.$post("/member/get_vip_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        if (this.$route.query.vip_level == 1) {
                            this.radio = 1
                        }
                        this.memberSource = res.data.list
                        this.text = res.data.desc
                    }
                })
                .catch(err => { });
        },
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f0effe");
    },
    created() {
        // 实例创建完成
        this.getMemberData();
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/member");
</style>